<template>
  <div class="user-info-wrap">
    <el-form ref="addInfo" :model="currentData" :rules="rules">
      <el-form-item label="名称" prop="roleName">
        <el-input
          v-model="currentData.roleName"
          :disabled="isEdit"
          maxlength="20"
          placeholder="名称最多20个字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="currentData.description"
          :disabled="isEdit"
          maxlength="50"
          placeholder="描述最多50个字符"
          resize="none"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="Unicode" prop="code">
        <el-input
          v-model="currentData.code"
          :disabled="isEdit"
          maxlength="20"
          placeholder="Unicode最多20个字符,仅支持数字和字母组合"
          @keyup.native="currentData.code = currentData.code.replace(/[^a-zA-Z0-9]/g,'')"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="currentData.status"
          :disabled="isEdit"
          class="btn-width-long"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { queryAllGroup } from '@/api/adminPage/userManage/role'
import { queryAllUser } from '@/api/adminPage/userManage/userGroup'

export default {
  name: 'RoleInfo',
  props: {
    currentData: {
      type: Object,
      require: true,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      statusList: [
        {
          label: '启用',
          value: '1'
        },
        {
          label: '禁用',
          value: '0'
        }
      ],
      rules: {
        roleName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        description: [
          { required: false, message: '请输入描述', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入Unicode', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      userList: [],
      groupList: []
    }
  },
  mounted() {
    this.getGroupList()
    this.getUserList()
  },
  methods: {
    getGroupList() {
      queryAllGroup().then(res => {
        this.groupList = res.result
      })
    },
    getUserList() {
      queryAllUser().then(res => {
        this.userList = res.result
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '~@/assets/styles/variables';
::v-deep .user-info-wrap{
.el-select__input {
  padding-left: 12px !important;
}
}
</style>
